<template>
  <div class="reminders-app">
    <!-- 左侧边栏 -->
    <div class="reminders-sidebar">
      <div class="sidebar-header">
        <h2>列表</h2>
        <button class="add-list-btn" @click="showAddListDialog = true" title="添加列表">
          <span>+</span>
        </button>
      </div>

      <!-- 系统列表 -->
      <div class="list-section">
        <div
          v-for="list in remindersStore.systemLists"
          :key="list.id"
          class="list-item"
          :class="{ active: remindersStore.selectedListId === list.id }"
          @click="remindersStore.selectList(list.id)"
        >
          <div class="list-icon" :style="{ background: list.color }">
            {{ list.icon }}
          </div>
          <span class="list-name">{{ list.name }}</span>
          <span v-if="remindersStore.listCounts[list.id] > 0" class="list-count">
            {{ remindersStore.listCounts[list.id] }}
          </span>
        </div>
      </div>

      <!-- 自定义列表 -->
      <div class="list-section" v-if="remindersStore.customLists.length > 0">
        <div class="section-title">我的列表</div>
        <div
          v-for="list in remindersStore.customLists"
          :key="list.id"
          class="list-item"
          :class="{ active: remindersStore.selectedListId === list.id }"
          @click="remindersStore.selectList(list.id)"
        >
          <div class="list-icon" :style="{ background: list.color }">
            {{ list.icon }}
          </div>
          <span class="list-name">{{ list.name }}</span>
          <span v-if="remindersStore.listCounts[list.id] > 0" class="list-count">
            {{ remindersStore.listCounts[list.id] }}
          </span>
        </div>
      </div>
    </div>

    <!-- 中间提醒事项列表 -->
    <div class="reminders-main">
      <div class="main-header">
        <h1>{{ remindersStore.selectedList?.name || '提醒事项' }}</h1>
        <div class="header-actions">
          <button class="header-btn" @click="showAddReminderDialog = true" title="添加提醒">
            + 新提醒
          </button>
        </div>
      </div>

      <div class="reminders-list">
        <div v-if="remindersStore.filteredReminders.length === 0" class="empty-state">
          <div class="empty-icon">📝</div>
          <p>暂无提醒事项</p>
        </div>

        <div
          v-for="reminder in remindersStore.filteredReminders"
          :key="reminder.id"
          class="reminder-item"
          :class="{
            active: remindersStore.selectedReminderId === reminder.id,
            completed: reminder.completed
          }"
          @click="remindersStore.selectReminder(reminder.id)"
        >
          <div class="reminder-checkbox" @click.stop="remindersStore.toggleReminderComplete(reminder.id)">
            <div class="checkbox-inner" :class="{ checked: reminder.completed }">
              <svg v-if="reminder.completed" viewBox="0 0 24 24" fill="none" stroke="currentColor">
                <polyline points="20 6 9 17 4 12"></polyline>
              </svg>
            </div>
          </div>

          <div class="reminder-content">
            <div class="reminder-title" :class="{ completed: reminder.completed }">
              {{ reminder.title }}
            </div>
            <div class="reminder-meta">
              <span v-if="reminder.dueDate" class="meta-item">
                <span class="meta-icon">📅</span>
                {{ formatDate(reminder.dueDate) }}
                <span v-if="reminder.dueTime" class="meta-time">{{ reminder.dueTime }}</span>
              </span>
              <span v-if="reminder.priority !== 'none'" class="meta-item priority" :class="`priority-${reminder.priority}`">
                <span class="priority-flag">🚩</span>
              </span>
              <span v-if="reminder.notes" class="meta-item">
                <span class="meta-icon">📄</span>
              </span>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 右侧详情面板 -->
    <div class="reminders-detail" v-if="remindersStore.selectedReminder">
      <div class="detail-header">
        <button class="close-detail-btn" @click="remindersStore.selectReminder(null)">
          <span>✕</span>
        </button>
      </div>

      <div class="detail-content">
        <div class="detail-checkbox-section">
          <div
            class="detail-checkbox"
            @click="remindersStore.toggleReminderComplete(remindersStore.selectedReminder.id)"
          >
            <div class="checkbox-inner large" :class="{ checked: remindersStore.selectedReminder.completed }">
              <svg v-if="remindersStore.selectedReminder.completed" viewBox="0 0 24 24" fill="none" stroke="currentColor">
                <polyline points="20 6 9 17 4 12"></polyline>
              </svg>
            </div>
          </div>
        </div>

        <div class="detail-field">
          <input
            v-model="remindersStore.selectedReminder.title"
            class="detail-title-input"
            placeholder="标题"
            @blur="saveReminderChanges"
          />
        </div>

        <div class="detail-field">
          <label class="detail-label">备注</label>
          <textarea
            v-model="remindersStore.selectedReminder.notes"
            class="detail-textarea"
            placeholder="添加备注..."
            rows="4"
            @blur="saveReminderChanges"
          ></textarea>
        </div>

        <div class="detail-field">
          <label class="detail-label">日期</label>
          <DatePicker
            v-model="remindersStore.selectedReminder.dueDate"
            placeholder="选择日期"
            @update:model-value="saveReminderChanges"
          />
        </div>

        <div class="detail-field">
          <label class="detail-label">时间</label>
          <TimePicker
            v-model="remindersStore.selectedReminder.dueTime"
            placeholder="选择时间"
            @update:model-value="saveReminderChanges"
          />
        </div>

        <div class="detail-field">
          <label class="detail-label">优先级</label>
          <select
            v-model="remindersStore.selectedReminder.priority"
            class="detail-select"
            @change="saveReminderChanges"
          >
            <option value="none">无</option>
            <option value="low">低</option>
            <option value="medium">中</option>
            <option value="high">高</option>
          </select>
        </div>

        <div class="detail-actions">
          <button class="delete-btn" @click="handleDeleteReminder">
            <span>🗑️</span>
            <span>删除</span>
          </button>
        </div>
      </div>
    </div>

    <!-- 添加提醒对话框 -->
    <transition name="fade">
      <div v-if="showAddReminderDialog" class="dialog-overlay" @click="showAddReminderDialog = false">
        <div class="dialog" @click.stop>
          <h3>新建提醒</h3>
          <form @submit.prevent="handleAddReminder">
            <div class="form-group">
              <label>标题</label>
              <input
                v-model="newReminder.title"
                type="text"
                class="form-input"
                placeholder="输入提醒事项..."
                autofocus
              />
            </div>
            <div class="form-group">
              <label>备注</label>
              <textarea
                v-model="newReminder.notes"
                class="form-textarea"
                placeholder="添加备注..."
                rows="3"
              ></textarea>
            </div>
            <div class="form-row">
              <div class="form-group">
                <label>日期</label>
                <DatePicker
                  v-model="newReminder.dueDate"
                  placeholder="选择日期"
                />
              </div>
              <div class="form-group">
                <label>时间</label>
                <TimePicker
                  v-model="newReminder.dueTime"
                  placeholder="选择时间"
                />
              </div>
            </div>
            <div class="form-group">
              <label>优先级</label>
              <Select
                v-model="newReminder.priority"
                :options="priorityOptions"
                placeholder="选择优先级"
              />
            </div>
            <div class="dialog-actions">
              <button type="button" class="btn-cancel" @click="showAddReminderDialog = false">
                取消
              </button>
              <button type="submit" class="btn-confirm" :disabled="!newReminder.title.trim()">
                添加
              </button>
            </div>
          </form>
        </div>
      </div>
    </transition>

    <!-- 添加列表对话框 -->
    <transition name="fade">
      <div v-if="showAddListDialog" class="dialog-overlay" @click="showAddListDialog = false">
        <div class="dialog small" @click.stop>
          <h3>新建列表</h3>
          <form @submit.prevent="handleAddList">
            <div class="form-group">
              <label>名称</label>
              <input
                v-model="newList.name"
                type="text"
                class="form-input"
                placeholder="列表名称..."
                autofocus
              />
            </div>
            <div class="form-group">
              <label>图标</label>
              <input
                v-model="newList.icon"
                type="text"
                class="form-input"
                placeholder="选择一个 Emoji..."
                maxlength="2"
              />
            </div>
            <div class="form-group">
              <label>颜色</label>
              <div class="color-picker">
                <div
                  v-for="color in colorOptions"
                  :key="color"
                  class="color-option"
                  :class="{ selected: newList.color === color }"
                  :style="{ background: color }"
                  @click="newList.color = color"
                ></div>
              </div>
            </div>
            <div class="dialog-actions">
              <button type="button" class="btn-cancel" @click="showAddListDialog = false">
                取消
              </button>
              <button type="submit" class="btn-confirm" :disabled="!newList.name.trim()">
                添加
              </button>
            </div>
          </form>
        </div>
      </div>
    </transition>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { useRemindersStore } from '@/stores/reminders.ts'
import DatePicker from '../../ui/DatePicker.vue'
import TimePicker from '../../ui/TimePicker.vue'
import Select from '../../ui/Select.vue'

const remindersStore = useRemindersStore()

// 对话框状态
const showAddReminderDialog = ref(false)
const showAddListDialog = ref(false)

// 新提醒表单
const newReminder = ref({
  title: '',
  notes: '',
  priority: 'none' as 'none' | 'low' | 'medium' | 'high',
  dueDate: null as Date | null,
  dueTime: '',
  tags: [] as string[]
})

// 新列表表单
const newList = ref({
  name: '',
  icon: '📋',
  color: '#007AFF'
})

// 颜色选项
const colorOptions = [
  '#007AFF', '#34C759', '#FF3B30', '#FF9500', '#5856D6',
  '#FF2D55', '#5AC8FA', '#FFD60A', '#BF5AF2', '#A2845E'
]

// 优先级选项
const priorityOptions = [
  { value: 'none', label: '无' },
  { value: 'low', label: '低' },
  { value: 'medium', label: '中' },
  { value: 'high', label: '高' }
]

// 格式化日期
function formatDate(dateStr: string): string {
  const date = new Date(dateStr)
  const today = new Date()
  const tomorrow = new Date(today)
  tomorrow.setDate(tomorrow.getDate() + 1)

  today.setHours(0, 0, 0, 0)
  tomorrow.setHours(0, 0, 0, 0)
  date.setHours(0, 0, 0, 0)

  if (date.getTime() === today.getTime()) {
    return '今天'
  } else if (date.getTime() === tomorrow.getTime()) {
    return '明天'
  } else {
    const month = date.getMonth() + 1
    const day = date.getDate()
    return `${month}月${day}日`
  }
}

// 添加提醒
function handleAddReminder() {
  if (!newReminder.value.title.trim()) return

  const listId = remindersStore.selectedListId
  const targetListId = ['today', 'scheduled', 'all', 'flagged', 'completed'].includes(listId)
    ? 'list-1'
    : listId

  // 将 Date 对象转换为字符串
  const dueDateStr = newReminder.value.dueDate
    ? newReminder.value.dueDate.toISOString().split('T')[0]
    : null

  remindersStore.addReminder({
    title: newReminder.value.title.trim(),
    notes: newReminder.value.notes.trim(),
    completed: false,
    priority: newReminder.value.priority,
    dueDate: dueDateStr,
    dueTime: newReminder.value.dueTime || null,
    tags: newReminder.value.tags,
    listId: targetListId
  })

  // 重置表单
  newReminder.value = {
    title: '',
    notes: '',
    priority: 'none',
    dueDate: null,
    dueTime: '',
    tags: []
  }

  showAddReminderDialog.value = false
}

// 添加列表
function handleAddList() {
  if (!newList.value.name.trim()) return

  remindersStore.addList({
    name: newList.value.name.trim(),
    icon: newList.value.icon || '📋',
    color: newList.value.color
  })

  // 重置表单
  newList.value = {
    name: '',
    icon: '📋',
    color: '#007AFF'
  }

  showAddListDialog.value = false
}

// 保存提醒更改
function saveReminderChanges() {
  if (remindersStore.selectedReminder) {
    remindersStore.updateReminder(
      remindersStore.selectedReminder.id,
      remindersStore.selectedReminder
    )
  }
}

// 删除提醒
function handleDeleteReminder() {
  if (remindersStore.selectedReminder) {
    if (confirm('确定要删除这个提醒事项吗？')) {
      remindersStore.deleteReminder(remindersStore.selectedReminder.id)
    }
  }
}
</script>

<style scoped>
.reminders-app {
  display: flex;
  height: 100%;
  background: #f5f5f7;
  overflow: hidden;
}

html.dark-mode .reminders-app {
  background: #1c1c1e;
}

/* ==================== 左侧边栏 ==================== */
.reminders-sidebar {
  width: 200px;
  background: rgba(240, 240, 245, 0.9);
  backdrop-filter: blur(40px);
  border-right: 0.5px solid rgba(0, 0, 0, 0.1);
  display: flex;
  flex-direction: column;
  overflow-y: auto;
}

html.dark-mode .reminders-sidebar {
  background: rgba(40, 40, 42, 0.95);
  border-right-color: rgba(255, 255, 255, 0.1);
}

.sidebar-header {
  padding: 52px 16px 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 0.5px solid rgba(0, 0, 0, 0.1);
}

html.dark-mode .sidebar-header {
  border-bottom-color: rgba(255, 255, 255, 0.1);
}

.sidebar-header h2 {
  font-size: 18px;
  font-weight: 700;
  color: #1d1d1f;
  margin: 0;
}

html.dark-mode .sidebar-header h2 {
  color: #f5f5f7;
}

.add-list-btn {
  width: 24px;
  height: 24px;
  border-radius: 6px;
  background: transparent;
  border: none;
  color: #007AFF;
  font-size: 20px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
}

.add-list-btn:hover {
  background: rgba(0, 122, 255, 0.1);
}

.list-section {
  padding: 8px;
}

.section-title {
  font-size: 11px;
  font-weight: 600;
  color: #86868b;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 8px 8px 4px;
  margin-top: 8px;
}

.list-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s;
  margin-bottom: 2px;
}

.list-item:hover {
  background: rgba(0, 0, 0, 0.05);
}

html.dark-mode .list-item:hover {
  background: rgba(255, 255, 255, 0.05);
}

.list-item.active {
  background: rgba(0, 122, 255, 0.15);
}

html.dark-mode .list-item.active {
  background: rgba(0, 122, 255, 0.25);
}

.list-icon {
  width: 28px;
  height: 28px;
  border-radius: 7px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  flex-shrink: 0;
}

.list-name {
  flex: 1;
  font-size: 13px;
  font-weight: 500;
  color: #1d1d1f;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

html.dark-mode .list-name {
  color: #f5f5f7;
}

.list-count {
  font-size: 12px;
  font-weight: 600;
  color: #86868b;
  min-width: 20px;
  text-align: right;
}

/* ==================== 中间列表区 ==================== */
.reminders-main {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
  background: white;
}

html.dark-mode .reminders-main {
  background: #2a2a2e;
}

.main-header {
  padding: 52px 20px 16px;
  border-bottom: 0.5px solid rgba(0, 0, 0, 0.1);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

html.dark-mode .main-header {
  border-bottom-color: rgba(255, 255, 255, 0.1);
}

.main-header h1 {
  font-size: 28px;
  font-weight: 700;
  color: #1d1d1f;
  margin: 0;
}

html.dark-mode .main-header h1 {
  color: #f5f5f7;
}

.header-actions {
  display: flex;
  gap: 8px;
}

.header-btn {
  padding: 8px 20px;
  border-radius: 8px;
  background: #007AFF;
  border: none;
  color: white;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  white-space: nowrap;
  min-width: 100px;
  box-shadow: 0 2px 8px rgba(0, 122, 255, 0.3);
}

.header-btn:hover {
  background: #0051D5;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0, 122, 255, 0.4);
}

.header-btn:active {
  transform: translateY(0);
  box-shadow: 0 1px 4px rgba(0, 122, 255, 0.3);
}

.reminders-list {
  flex: 1;
  overflow-y: auto;
  padding: 12px;
}

.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  color: #86868b;
}

.empty-icon {
  font-size: 64px;
  margin-bottom: 16px;
  opacity: 0.5;
}

.empty-state p {
  font-size: 16px;
  margin: 0;
}

.reminder-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px;
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.02);
  margin-bottom: 8px;
  cursor: pointer;
  transition: all 0.2s;
  border: 1.5px solid transparent;
}

.reminder-item:hover {
  background: rgba(0, 0, 0, 0.04);
}

html.dark-mode .reminder-item {
  background: rgba(255, 255, 255, 0.03);
}

html.dark-mode .reminder-item:hover {
  background: rgba(255, 255, 255, 0.05);
}

.reminder-item.active {
  background: rgba(0, 122, 255, 0.08);
  border-color: rgba(0, 122, 255, 0.3);
}

.reminder-item.completed {
  opacity: 0.6;
}

.reminder-checkbox {
  padding-top: 2px;
  flex-shrink: 0;
}

.checkbox-inner {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 2px solid #c7c7cc;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
  cursor: pointer;
}

.checkbox-inner:hover {
  border-color: #007AFF;
}

.checkbox-inner.checked {
  background: #007AFF;
  border-color: #007AFF;
}

.checkbox-inner svg {
  width: 12px;
  height: 12px;
  stroke-width: 3;
  color: white;
}

.checkbox-inner.large {
  width: 32px;
  height: 32px;
}

.checkbox-inner.large svg {
  width: 18px;
  height: 18px;
}

.reminder-content {
  flex: 1;
  min-width: 0;
}

.reminder-title {
  font-size: 14px;
  font-weight: 500;
  color: #1d1d1f;
  margin-bottom: 4px;
  line-height: 1.4;
}

html.dark-mode .reminder-title {
  color: #f5f5f7;
}

.reminder-title.completed {
  text-decoration: line-through;
  color: #86868b;
}

.reminder-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.meta-item {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  color: #86868b;
  padding: 2px 6px;
  border-radius: 4px;
  background: rgba(0, 0, 0, 0.03);
}

html.dark-mode .meta-item {
  background: rgba(255, 255, 255, 0.05);
}

.meta-icon {
  font-size: 10px;
}

.meta-time {
  margin-left: 2px;
}

.meta-item.priority {
  background: transparent;
  padding: 0;
}

.priority-flag {
  font-size: 12px;
}

.priority-high .priority-flag {
  filter: hue-rotate(0deg);
}

.priority-medium .priority-flag {
  filter: hue-rotate(30deg);
}

.priority-low .priority-flag {
  filter: hue-rotate(60deg) saturate(0.5);
}

/* ==================== 右侧详情面板 ==================== */
.reminders-detail {
  width: 320px;
  background: rgba(250, 250, 250, 0.95);
  backdrop-filter: blur(40px);
  border-left: 0.5px solid rgba(0, 0, 0, 0.1);
  display: flex;
  flex-direction: column;
  overflow-y: auto;
}

html.dark-mode .reminders-detail {
  background: rgba(30, 30, 32, 0.95);
  border-left-color: rgba(255, 255, 255, 0.1);
}

.detail-header {
  padding: 52px 20px 16px;
  border-bottom: 0.5px solid rgba(0, 0, 0, 0.1);
  display: flex;
  justify-content: flex-end;
}

html.dark-mode .detail-header {
  border-bottom-color: rgba(255, 255, 255, 0.1);
}

.close-detail-btn {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.05);
  border: none;
  color: #86868b;
  font-size: 16px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
}

.close-detail-btn:hover {
  background: rgba(0, 0, 0, 0.1);
  color: #1d1d1f;
}

html.dark-mode .close-detail-btn {
  background: rgba(255, 255, 255, 0.05);
}

html.dark-mode .close-detail-btn:hover {
  background: rgba(255, 255, 255, 0.1);
  color: #f5f5f7;
}

.detail-content {
  padding: 20px;
}

.detail-checkbox-section {
  display: flex;
  justify-content: center;
  margin-bottom: 24px;
}

.detail-field {
  margin-bottom: 20px;
}

.detail-label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: #86868b;
  margin-bottom: 8px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.detail-title-input {
  width: 100%;
  font-size: 20px;
  font-weight: 600;
  color: #1d1d1f;
  background: transparent;
  border: none;
  padding: 8px 0;
  outline: none;
}

html.dark-mode .detail-title-input {
  color: #f5f5f7;
}

.detail-textarea,
.detail-input,
.detail-select {
  width: 100%;
  padding: 10px 12px;
  border-radius: 8px;
  border: 1px solid rgba(0, 0, 0, 0.1);
  background: white;
  font-size: 14px;
  color: #1d1d1f;
  outline: none;
  transition: all 0.2s;
}

html.dark-mode .detail-textarea,
html.dark-mode .detail-input,
html.dark-mode .detail-select {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.1);
  color: #f5f5f7;
}

.detail-textarea:focus,
.detail-input:focus,
.detail-select:focus {
  border-color: #007AFF;
  box-shadow: 0 0 0 3px rgba(0, 122, 255, 0.1);
}

.detail-textarea {
  resize: vertical;
  min-height: 80px;
  font-family: inherit;
}

.detail-actions {
  margin-top: 32px;
  padding-top: 20px;
  border-top: 0.5px solid rgba(0, 0, 0, 0.1);
}

html.dark-mode .detail-actions {
  border-top-color: rgba(255, 255, 255, 0.1);
}

.delete-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  border-radius: 8px;
  background: rgba(255, 59, 48, 0.1);
  border: none;
  color: #FF3B30;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s;
  width: 100%;
  justify-content: center;
}

.delete-btn:hover {
  background: rgba(255, 59, 48, 0.15);
}

/* ==================== 对话框 ==================== */
.dialog-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

.dialog {
  background: white;
  border-radius: 16px;
  padding: 24px;
  width: 90%;
  max-width: 480px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
  animation: scaleIn 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.dialog.small {
  max-width: 360px;
}

html.dark-mode .dialog {
  background: #2a2a2e;
}

@keyframes scaleIn {
  from {
    opacity: 0;
    transform: scale(0.95);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

.dialog h3 {
  font-size: 20px;
  font-weight: 600;
  color: #1d1d1f;
  margin: 0 0 20px;
}

html.dark-mode .dialog h3 {
  color: #f5f5f7;
}

.form-group {
  margin-bottom: 16px;
}

.form-group label {
  display: block;
  font-size: 13px;
  font-weight: 500;
  color: #1d1d1f;
  margin-bottom: 6px;
}

html.dark-mode .form-group label {
  color: #f5f5f7;
}

.form-input,
.form-textarea,
.form-select {
  width: 100%;
  padding: 10px 12px;
  border-radius: 8px;
  border: 1px solid rgba(0, 0, 0, 0.15);
  background: rgba(0, 0, 0, 0.02);
  font-size: 14px;
  color: #1d1d1f;
  outline: none;
  transition: all 0.2s;
  font-family: inherit;
}

html.dark-mode .form-input,
html.dark-mode .form-textarea,
html.dark-mode .form-select {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.1);
  color: #f5f5f7;
}

.form-input:focus,
.form-textarea:focus,
.form-select:focus {
  border-color: #007AFF;
  box-shadow: 0 0 0 3px rgba(0, 122, 255, 0.1);
}

.form-textarea {
  resize: vertical;
  min-height: 60px;
}

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.color-picker {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.color-option {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s;
  border: 3px solid transparent;
}

.color-option:hover {
  transform: scale(1.1);
}

.color-option.selected {
  border-color: white;
  box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.2);
}

.dialog-actions {
  display: flex;
  gap: 12px;
  margin-top: 24px;
}

.btn-cancel,
.btn-confirm {
  flex: 1;
  padding: 10px 20px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s;
}

.btn-cancel {
  background: rgba(0, 0, 0, 0.05);
  border: none;
  color: #1d1d1f;
}

.btn-cancel:hover {
  background: rgba(0, 0, 0, 0.1);
}

html.dark-mode .btn-cancel {
  background: rgba(255, 255, 255, 0.05);
  color: #f5f5f7;
}

html.dark-mode .btn-cancel:hover {
  background: rgba(255, 255, 255, 0.1);
}

.btn-confirm {
  background: #007AFF;
  border: none;
  color: white;
}

.btn-confirm:hover:not(:disabled) {
  background: #0051D5;
}

.btn-confirm:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.fade-enter-active, .fade-leave-active {
  transition: opacity 0.2s;
}

.fade-enter-from, .fade-leave-to {
  opacity: 0;
}
</style>

